<!--
*@Author: QWP
*@Description: 出差审批单
*@Date: 2023-10-08 16:53:39
-->
<template>
  <div class="u-evection-print">
    <div style=" width: 100%;
      padding: 20px 0;
      text-align: center;
      display: inline-block;
      font-size: 22px;
      font-family: Nunito-Medium, Nunito;
      font-weight: 800;
      color: #333333;
      line-height: 28px;
      letter-spacing: 2px;
      ">
      <span style="display: inline-block;
        padding: 0 20px;
        border-bottom: 2px solid #333">自贡市公安局出差审批单
      </span>
    </div>
    <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between;">
      <div >承办部门: {{ formData['redeptname'] }}</div>
      <div>
        {{ formData['evectiondate'] }}
      </div>
      <div style="width: 100px">&nbsp;</div>
    </div>
    <table style="margin-top: 6px;
      width: 100%; 
      table-layout: fixed; 
      word-break: break-all; 
      word-wrap: break-word;
      border-collapse: collapse;
      border-color: #333" 
      border="1">
      <tr style="height: 35px">
        <td style="width: 16.66%; text-align: center; padding: 4px">事由</td>
        <td style="width: calc(100% - 16.66%); padding: 4px" colspan="5">{{ formData['evectionreason'] }}</td>
      </tr>
      <tr style="height: 35px">
        <td style="width: 16.66%; text-align: center; padding: 4px">时间</td>
        <td style="width: calc(100% - 16.66%); padding: 4px" colspan="5">{{ formData['startdate']  }} - {{ formData['enddate'] }}</td>
      </tr>
      <tr style="height: 35px">
        <td style="width: 16.66%; text-align: center; padding: 4px">往返地点</td>
        <td style="width: calc(100% - 16.66%); padding: 4px" colspan="5">{{ formData['fkareaidstart'] }} - {{ formData['fkareaidend'] }}</td>
      </tr>
      <tr style="height: 35px">
        <td style="width: 16.66%; text-align: center; padding: 4px">出差人员</td>
        <td style="width: calc(100% - 16.66%); padding: 4px" colspan="5">{{ formData['eusers'] }}</td>
      </tr>
      <tr style="height: 35px">
        <td style="width: 16.66%; text-align: center; padding: 4px">交通工具</td>
        <td style="width: calc(100% - 16.66%); padding: 4px" colspan="5">{{ formData['travelWay'] }}</td>
      </tr>
      <tr style="height: 35px">
        <td style="width: 16.66%; text-align: center; padding: 4px">预计费用</td>
        <td style="width: calc(100% - 16.66%); padding: 4px"  colspan="5">￥{{ formatAmtM(formData['evectionamount']) }}</td>
      </tr>
      <tr style="height: 60px">
        <td style="width: 16.66%; text-align: center; padding: 4px">承办人</td>
        <td style="width: 16.66%; text-align: cente; padding: 4px" v-html="formData['shr1']"></td>
        <td style="width: 16.66%; text-align: center; padding: 4px">部门审核</td>
        <td style="width: 16.66%; text-align: center; padding: 4px">
          <u-print-sign :form="formData" :value="formData['shr2']" />
        </td>
        <td style="width: 16.66%; text-align: center; padding: 4px">领导审核</td>
        <td style="position: relative; width: 16.7%; text-align: center; padding: 4px">
          <u-print-sign :form="formData" :value="getAllLeader" />
        </td>
      </tr>
    </table>
    <p>备注: 1、出差人员按程序审批，用作报销差旅费附件；2、参会及培训人员需提供参会及培训的依据。</p>
  </div>
</template>
<script>
import evection_applyService from '@/service/busi/finance/evection_apply.service';
import evection_regionService from '@/service/busi/finance/evection_region.service';
import enmuService from '@/service/common/enmu.service';
import { isValue, nullC, numberC } from '@/util/commonVerify';
import { cancelAmt, formatAmt, getItemByIds } from '@/util/format.ts'
import dayjs from 'dayjs';
import PrintSign from '@/components/busi/FinancialManComponets/print/common/PrintSign.vue'
export default {
  components: {
    'u-print-sign': PrintSign,
  },
  props: {
    keyid: { // 差旅申请的keyid
      type: String,
      default: ''
    },
    form: { // 出差数据
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      regionData: this.$store.getters['baseStore/get_EVECTION_AREA'],
      travelWay: this.$store.getters['baseStore/get_TRAVEL_APPLY_WAY'],

      formData: {}
    }
  },
  computed: {
    getAllLeader() {
      const position = [3, 4, 5, 6];
      let result = [];
      position.forEach(i => {
        let tItem = this.formData[`shr${i}`] || [];
        tItem.forEach(o => {
          if(!result.some(l => l == o)) {
            result.push(o)
          }
        })
      })

      return result.sort((a, b) => a.orderno - b.orderno)
    }
  },
  mounted() {},
  methods: {
    // 获取基础数据，下拉数据
		getEnum() {
			const types = [
				enmuService.types.TRAVEL_APPLY_WAY,
        enmuService.types.PAYFEE_TYPE, // 支付方式
				enmuService.types.FEE_TYPE, // 支付费用分类
			]
			return enmuService.enums({ types: types.join(',') }).then(res => {
        if(res.data.code == 0) {
          this.travelWay.splice(0, this.travelWay.length, ...res.data.data['TRAVEL_APPLY_WAY'])
        }
      })
		},

    // 获取出差地区
		getEvectionRegion() {
			return evection_regionService.validTree(this.$store.getters['loginStore/getUserInfo']['unitId']).then(res => {
				if(res.data.code == 0) {
          this.regionData = res.data.data;
				}
			})
		},

    // 获取出差信息
    async getEvection() {
      // await this.getEnum();
      // await this.getEvectionRegion();
      evection_applyService.singleQuery(this.keyid).then(res => {
        if(res.data.code == 0) {
          this.formData = res.data.data;
          this.formData.evectiondate = dayjs(this.formData.evectiondate).format('YYYY年MM月DD日');
          if(this.formData['startdate']) {
            this.formData.startdate = dayjs(this.formData.startdate).format('YYYY-MM-DD');
          }
          if(this.formData['enddate']) {
            this.formData.enddate = dayjs(this.formData.enddate).format('YYYY-MM-DD');
          }
          this.formData.evectionamount = formatAmt(numberC(this.formData.evectionamount));
          let areas = getItemByIds(this.regionData, [this.formData['fkareaidstart'], this.formData['fkareaidend']]);
          if(areas.length > 0) {
            this.formData['fkareaidstart'] = areas[0]['name']
          }
          if(areas.length > 1) {
            this.formData['fkareaidend'] = areas[1]['name']
          }

          // 交通工具
          let travelWay = this.travelWay.findIndex(item => item.id == this.formData.travelway);
          if(travelWay != -1) {
            this.formData.travelWay = this.travelWay[travelWay]['name'];
          }

          this.formData.eusers = this.formData.users.map(item => item.reusername).join(',')
        }
      })
    },

    // 格式化金额
    formatAmtM(value) {
      return formatAmt(cancelAmt(value))
    }
  },
  watch: {
    keyid: {
      handler: function(nval) {
        if(isValue(nval) && Object.keys(this.form).length == 0) {
          this.getEvection()
        }
      },
      immediate: true
    },
    form: {
      handler: function(nval, oval) {
        if(Object.keys(nval).length != 0) {
          this.formData = nval;
          if(this.formData['startdate']) {
            this.formData.startdate = dayjs(this.formData.startdate).format('YYYY-MM-DD');
          }
          if(this.formData['enddate']) {
            this.formData.enddate = dayjs(this.formData.enddate).format('YYYY-MM-DD');
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang='scss'>
.u-evection-print {
  td{
    padding: 6px 4px;
  }
}
</style>
<style>
@media print {
  td{
    padding: 0 6px;
  }
}
</style>